<template>
  <!--切换弹窗-->
  <van-action-sheet v-model:show="show1" title="切换就诊人">
    <div>
      <p style="text-align: left;margin-left: 10px;font-weight: bold;">就诊卡</p>
      <van-radio-group v-model="checked1">
        <van-cell-group inset>
          <template v-for="card in patientCard" :key="card.patientId">
            <van-cell class="patientCardContainer" clickable @click="handleCardSelection(card.patientId, card)">
              <template #title>
                <p class="card-title-text">{{ card.pname }}</p>
              </template>
              <template #right-icon>
                <van-radio :name="card.patientId"/>
              </template>
              <template #label>
                <p class="card-label-text">南昌大学第二附属医院</p>
                <p class="card-label-text">{{ card.idCardNumber }}</p>
              </template>
            </van-cell>

          </template>
        </van-cell-group>
      </van-radio-group>
    </div>
  </van-action-sheet>
  <!--顶部固定布局-->
  <van-sticky>
    <van-cell-group>
      <van-cell center="center" size="large" value="切换就诊人" style="--van-cell-value-color: rgb(79, 156, 245);" @click="popEvents"
                is-link>
        <template #title>
          <p style="text-align: left;line-height: 0;font-weight: bold;">{{ selectedPatient.pname }}</p>
        </template>
      </van-cell>
      <van-cell center="center" size="large" @click="show = true"
                style="--van-cell-value-color: rgb(79, 156, 245);--van-cell-background:rgb(241,241,241);">
        <template #title>
          <p style="text-align: left;line-height: 0;">点击筛选就诊状态</p>
        </template>
        <template #value>
          <van-icon name="filter-o"/>
          筛选
        </template>
      </van-cell>
    </van-cell-group>
  </van-sticky>
  <!--筛选弹窗-->
  <van-action-sheet v-model:show="show" title="筛选">
    <div>
      <p style="text-align: left;margin-left: 10px;font-weight: bold;">问诊状态</p>
      <van-checkbox-group v-model="checked">
        <van-grid :gutter="10" column-num="3"
                  style="--van-grid-item-content-background:rgb(241,241,241);margin-bottom: 20px">
          <van-grid-item>
            <van-checkbox name="1">待付款</van-checkbox>
          </van-grid-item>
          <van-grid-item>
            <van-checkbox name="2">待就诊</van-checkbox>
          </van-grid-item>
          <van-grid-item>
            <van-checkbox name="3">就诊中</van-checkbox>
          </van-grid-item>
          <van-grid-item>
            <van-checkbox name="4">已就诊</van-checkbox>
          </van-grid-item>
          <van-grid-item>
            <van-checkbox name="5">已预约</van-checkbox>
          </van-grid-item>
          <van-grid-item>
            <van-checkbox name="6">已取号</van-checkbox>
          </van-grid-item>
          <van-grid-item>
            <van-checkbox name="7">已取消</van-checkbox>
          </van-grid-item>
          <van-grid-item>
            <van-checkbox name="8">已过号</van-checkbox>
          </van-grid-item>
          <van-grid-item>
            <van-checkbox name="9">已爽约</van-checkbox>
          </van-grid-item>
          <van-grid-item>
            <van-checkbox name="10">已退诊</van-checkbox>
          </van-grid-item>
          <van-grid-item>
            <van-checkbox name="11">已停诊</van-checkbox>
          </van-grid-item>
          <van-grid-item>
            <van-checkbox name="12">已退号</van-checkbox>
          </van-grid-item>
        </van-grid>
      </van-checkbox-group>
      <van-row justify="center" style="margin-bottom: 20px">
        <van-col span="6">
          <van-button plain type="primary" style="width: 80%" @click="resetSelection">重置</van-button>
        </van-col>
        <van-col span="6">
          <van-button type="primary" style="width: 80%" @click="filterData">筛选</van-button>
        </van-col>
      </van-row>
    </div>
  </van-action-sheet>
  <!--预约记录列表-->
  <van-empty v-if="isLoad" description="加载中" />
  <div v-else>
    <van-cell-group>
      <van-cell @click = "showDetail(appointment.id)" v-for="appointment in appointmentList" :key="appointment.id" center clickable size="large">
        <template #icon>
          <img :src="require('@/assets/images/doctor.png')" alt="医生图片"
               style="max-width: 60px; max-height: 60px;border-radius: 50%;margin-right: 20px">
        </template>
        <template #title>
          <div class="title-text">
            <div>
              {{ appointment.doctorName }}
              <van-tag type="primary" style="margin-left: 5px">线下</van-tag>
            </div>
            <span style="text-align: right;font-weight: normal">{{ appointment.status }}</span>
          </div>
        </template>
        <template #label>
          <p class="label-text">{{ appointment.departmentName }}</p>
          <p class="label-text">就诊时间：{{ appointment.appointmentTime }}</p>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script setup>
import {onBeforeMount, ref} from 'vue';
import {AppointmentService, PatientService} from "@/api/api";
import {closeToast, showLoadingToast} from "vant";
import router from "@/router";
const show1 = ref(false);
const checked1 = ref([1,2,3,4,5,6,7,8,9,10,11,12]);
const isDataLoaded = ref(false);

const selectedPatient = ref(
    {
      pname: "未获取数据",
      telNumber: "未获取数据",
      idCardNumber: "未获取数据"
    }
);// 选中的病人

let patientCard = ref([
  {
    patientId: "-1",
    pname: "未获取数据"
  }
]); // 存储病人数据的响应式数组

const handleCardSelection = async (patientId, patientCard) => {
  checked1.value = patientId;
  selectedPatient.value = patientCard;
  const appointmentData = {
    patientId: selectedPatient.value.patientId,
    state: checked.value ? checked.value.toString() : '1,2,3,4,5,6,7,8,9,10,11,12'
  };
  // 调用后端API接口发送保存数据的请求
  const response = await AppointmentService.getAppointmentList(appointmentData);
  console.log(response);
  appointmentList.value = response.data;
};
const popEvents = async () => {
  console.log(checked1.value);
  try {
    const loginId = '1'; // 替换为实际的 loginId 值
    const response = await PatientService.patientList(loginId);
    // 获取响应数据
    patientCard = response.data; // 将响应数据存储在 patientCard 变量中
    // console.log(response.data); // 输出结果
    show1.value = true;
  } catch (error) {
    console.error(error); // 处理错误
  }
};

const show = ref(false);
const checked = ref();
const isLoad = ref(true);
const appointmentList = ref([
  {
    id: 1095,
    doctorName: '李超',
    departmentName: '心内科门诊(南区)',
    appointmentTime: '2023-10-10 09:00~09:30',
    status: '已取消'
  }
]);

onBeforeMount(async () => {
  await loadData(); // 在页面加载完成后调用加载数据的方法
});

showLoadingToast({
  message: '加载中...',
  forbidClick: true,
});

const loadData = async () => {

  const loginId = '1'; // 替换为实际的 loginId 值
  const response1 = await PatientService.patientList(loginId);
  // 获取响应数据
  selectedPatient.value = response1.data[0]; // 将响应数据存储在 patientCard 变量中
  checked1.value = response1.data[0].patientId;

  isDataLoaded.value = true;

  const appointmentData = {
    patientId: selectedPatient.value.patientId,
    state : "1,2,3,4,5,6,7,8,9,10,11,12"
  };

  console.log(appointmentData);
  // 调用后端API接口发送保存数据的请求
  const response = await AppointmentService.getAppointmentList(appointmentData);
  console.log(response);
  appointmentList.value = response.data;
  closeToast();
  isLoad.value = false;
};

const resetSelection = () => {
  checked.value = [];
};

const filterData = async () => {
  console.log(checked.value.toString());
  const appointmentData = {
    patientId: selectedPatient.value.patientId,
    state: checked.value ? checked.value.toString() : '1,2,3,4,5,6,7,8,9,10,11,12'
  };
  // 调用后端API接口发送保存数据的请求
  const response = await AppointmentService.getAppointmentList(appointmentData);
  console.log(response);
  appointmentList.value = response.data;
  show.value = false;
};

const showDetail = async (id) => {
  console.log(id);
  try {
    const data = {
      appointmentId: id
    };

    await router.push({
      path: '/AppointmentDetail',
      state: data
    });
  } catch (error) {
    console.error(error);
  }
};

</script>

<style scoped>
.label-text {
  text-align: left;
  line-height: 0.8;
}

.title-text {
  line-height: 0.8;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.patientCardContainer {
  --van-cell-value-color: rgb(79, 156, 245);
}

.card-title-text {
  text-align: left;
  line-height: 0.8;
  font-weight: bold;
  font-size: 1.5em;
}

.card-label-text {
  text-align: left;
  line-height: 0.8;
  color: white;
  font-size: 1.2em;
}

.patientCardContainer {
  background-image: url('~@/assets/images/patientCard.png'); /* 图片路径 */
  background-size: cover;
  margin-bottom: 10px;
}
</style>